<template lang="html">
  <div class="supplier_box">
    <div class="search_box">
      <el-input v-model="searchInput" placeholder="供应商姓名" class="input-with-select">
        <el-button slot="append" class="seach_btn" icon="el-icon-search" @click="onsearch"/>
      </el-input>
    </div>
    <div class="table_box">
      <el-table :data="tableData.list" style="width: 100%">
        <el-table-column prop="name" label="供应商姓名" align="center">
          <template slot-scope="scope">
              <el-button @click="onShow(0,scope.row)" size="mini" type="primary" plain>{{ scope.row.name }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="电话"  align="center" width=""/>
        <el-table-column prop="area_num" label="区域（数量）" align="center">
          <template slot-scope="scope">
              <el-button @click="onShow(1,scope.row)" size="mini" type="primary" plain>{{ scope.row.area_num }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="if_oil" label="是否供油" align="center">
          <template slot-scope="scope">
            <p v-if="scope.row.if_oil == 0">否</p>
            <router-link v-if="scope.row.if_oil == 1" :to="{ path: '/Supplier/oilList', query: {name:scope.row.name} }">
              <el-button type="primary" size="mini" plain>是</el-button>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column label="收益" width="" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="onShow(3,scope.row)" type="primary" plain>查看详情</el-button>
          </template>
        </el-table-column>

        <el-table-column prop="cash_money" label="提现" width="" align="center">
          <template slot-scope="scope">
              <el-button @click="onShow(2,scope.row)" size="mini" type="primary" plain>{{ scope.row.cash_money }}次</el-button>
          </template>
        </el-table-column>
        <el-table-column label="最低结算额" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="editMini(scope.row)" plain>{{ scope.row.min_money }}</el-button>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="" label="操作" width="80" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">取消合作</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- <div class="el-page" v-if="tableData.total">
     			 <div class="block"> -->
      <el-pagination :page-count="tableData.rows" :current-page="currentPage" layout="prev, pager, next" align="center" @current-change="changePage"/>
      <!-- </div>
     		 </div> -->
      <el-dialog :visible.sync="centerDialogVisible" title="设置最低结算额" width="30%" center>
        <el-input v-model="currentRow.min_money" type="text" placeholder="请输入内容"/>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="rejectConfirm">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog :visible.sync="centerDialogVisible1" title="供应商信息">
        <el-table :data="[userData]">
          <el-table-column align="center" width="100" property="" label="头像">
            <template slot-scope="scope" lang="html">
              <div class="avatar">
                <img :src="scope.row.head_pic" alt="" >
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" width="300" property="account" label="提现账户"/>
          <el-table-column align="center" width="" property="bank" label="开户行"/>
          <el-table-column align="center" property="bank_name" label="开户名"/>
          <el-table-column align="center" width="" property="bank_branch" label="开户分行"/>
        </el-table>
      </el-dialog>
      <el-dialog :visible.sync="centerDialogVisible2" title="区域">
          <el-table :data="areaData">
              <el-table-column label="区域名称/省市">
                <template slot-scope="scope">
                  <p>{{ scope.row.province }}-{{ scope.row.city }}</p>
                </template>
              </el-table-column>
              <el-table-column label="服务类型">
                <template slot-scope="scope">
                  <p v-if="scope.row.type.obd == 1">邦保盒子</p>
                  <p v-if="scope.row.type.free == 1">养护品</p>
                </template>
              </el-table-column>
          </el-table>
      </el-dialog>

      <el-dialog :visible.sync="centerDialogVisible3" title="收益详情">
        <el-table :data="[cashData]">
          <el-table-column width="" property="oil_income" label="油品供应" />
          <el-table-column width="" property="total_income" label="邦保盒子供应" />
          <el-table-column width="" property="free_income" label="养护品供应" />
        </el-table>
      </el-dialog>

      <el-dialog :visible.sync="centerDialogVisible4" title="提现详情">
        <el-table :data="cashData.list">
          <el-table-column width="" property="create_time" label="申请提现时间" />
          <el-table-column width="100" property="total_money" label="提现金额" />
          <el-table-column width="100" property="audit_person" label="审核人" />
          <el-table-column width="" property="audit_time" label="审核时间" />
        </el-table>
        <el-pagination :total="cashData.rows" layout="prev, pager, next" align="center" @current-change="cashPage(scope.row)" />
      </el-dialog>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      token: this.$store.state.user.token3,
      searchInput: '',
      tableData: [],
      centerDialogVisible: false,
      centerDialogVisible1:false,
      centerDialogVisible2:false,
      centerDialogVisible3:false,
      centerDialogVisible4:false,
      currentRow: {},
      currentPage:1,
      userData: [],
      areaData: [],
      cashData: []
    }
  },
  created() {
    this.renderDOM()
  },
  methods: {
    renderDOM(page = 1) {
      this.currentPage = page;
      this.$http2.smIndexList({
        sm_name: this.searchInput,
        page: page
      }).then(res => {
        if (res.data.code == 1) {
          this.tableData = res.data.data
          for (var i = 0; i < this.tableData.list.length; i++) {
            this.tableData.list[i].total_income =
            this.tableData.list[i].total_income -
            this.tableData.list[i].oil_income -
            this.tableData.list[i].free_income
            this.tableData.list[i].total_income =
            this.tableData.list[i].total_income.toFixed(2)
          }
        } else {
          this.tableData = res.data.data
        }
      })
    },
    onsearch() {
      if (!this.searchInput) {
        return false
      }
      this.renderDOM()
    },
    // 取消合作
    handleClick() {
      return false
    },
    // 切换页
    changePage(e) {
      this.renderDOM(e)
    },
    cashPage(e, ev) {
      this.onShow(2, ev, e)
    },
    editMini(e) {
      this.currentRow = e
      this.centerDialogVisible = true
    },
    rejectConfirm() {
      this.$http2.setSmMinMoney({
        token: this.token,
        min_money: this.currentRow.min_money,
        id: this.currentRow.id
      }).then(res => {
        if (res.data.code == 1) {
          this.$message.success(res.data.msg)
          this.centerDialogVisible = false
          this.renderDOM()
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    // 弹出层
    onShow(expression, scope, page = 1) {
      switch (expression) {
        case 0:
          this.centerDialogVisible1 = true;
          this.userData = [];
          this.$http2.getSmUserDetail({
            sm_id: scope.id
          }).then(res => {
            this.userData =
            res.data.code == 1
            ? res.data.data : []
          })
          break
        case 1:
          this.centerDialogVisible2 = true;
          this.areaData = [];
          this.$http2.gerSmAreaInfo({
            sm_id: scope.id
          })
            .then(res => {
              this.areaData =
              res.data.code == 1
              ? res.data.data : []
            })
          break
        case 2:
          this.centerDialogVisible4 = true;
          this.cashData = [];
          this.$http2.getSmApplyCash({
            sm_id: scope.id,
            page: page
          }).then(res => {
            this.cashData =
            res.data.code == 1
            ? res.data.data : []
          })
          break
        default:
          this.centerDialogVisible3 = true;
          this.cashData = [];
          this.cashData = scope;
          break
      }
    }

  }

}
</script>

<style lang="css" scoped>
/deep/ .el-input-group__append, .el-input-group__prepend{
  background-color: #3498E9;
  border: none;
  color: white;
}
.preview-img{
  display: block;
  width: 100%;
  height: 30px;
}
.header{
  margin-bottom: 10px
}
.page_box{
  text-align: center;
}
.supplier_box {
  padding: 10px 10px 10px 30px;
}
.search_box {
  width: 400px;
}
.seach_btn {
  width: 120px;
}
.table_box {
  padding-top: 10px;
}
.avatar {
  width: 50px;
  height: 50px;
  overflow: hidden;
}
.avatar img {
  width: 100%;
  display: block;
}
</style>
